<template>
    <view class="goods-detail">
        <!-- 商品海报 -->
        <view class="goods-poster">
            <u-image :src="goodsInfo.titleImg" width="100%" height="400rpx" mode="aspectFill"></u-image>
        </view>

        <!-- 商品信息 -->
        <view class="goods-info">
            <view class="goods-title">{{ goodsInfo.title }}</view>
            <view class="goods-price">¥{{ goodsInfo.goodsPrice }}</view>
            <view class="goods-sub-info">
                <text>已售: {{ goodsInfo.buyNum }}</text>
                <text>类型: {{ goodsInfo.classify === 1 ? '工具' : '普通商品' }}</text>
                <text v-if="goodsInfo.classify !== 1">运费: {{ goodsInfo.freightPrice > 0 ? goodsInfo.freightPrice : '包邮' }}</text>
            </view>
        </view>

        <!-- 新增商品状态展示 -->
		
		<view class="quanyi_content_box"  v-if="goodsInfo.classify == 1">
		<view class="qy_title">商品权益</view>
        <view class="goods-status">
            <view class="status-item">
				<image src='/static/images/pay/i_1.png'></image>
                <view class="st_text_box">
					<text class="status-label">短剧数量</text>
					<text class="status-value">{{ goodsInfo.playletNum }}</text>
				</view>
            </view>
            <view class="status-item">
				<image src='/static/images/pay/i_2.png'></image>
				 <view class="st_text_box">
                <text class="status-label">视频数量</text>
                <text class="status-value">{{ goodsInfo.videoNum }}</text>
				</view>
            </view>
            <view class="status-item">
				<image src='/static/images/pay/i_3.png'></image>
				 <view class="st_text_box">
                <text class="status-label">修改次数</text>
                <text class="status-value">{{ goodsInfo.editNum }}</text>
				</view>
            </view>
            <view class="status-item">
				<image src='/static/images/pay/i_4.png'></image>
				 <view class="st_text_box">
                <text class="status-label">删除次数</text>
                <text class="status-value">{{ goodsInfo.delNum }}</text>
				</view>
            </view>
        </view>
	</view>
        <!-- 商品详情 -->
        <view class="goods-detail-content">
            <view class="section-title">商品详情</view>
            <text>简介: {{ goodsInfo.describeText }}</text>
            <br />
            <u-image v-if="goodsInfo.img!==null" :src="goodsInfo.img" width="100%" height="auto" mode="widthFix"></u-image>
        </view>

        <!-- 底部购买按钮 -->
        <view class="footer-btn">
            <button type="primary" @click="handleBuy">立即购买</button>
        </view>

        <!-- 收货地址弹框 -->
        <u-popup v-model="showAddressForm" mode="bottom" border-radius="24">
            <view class="address-form">
                <view class="form-title">填写收货信息</view>
                <view class="form-item">
                    <text>收货人姓名</text>
                    <input v-model.trim="addressForm.name" placeholder="请输入收货人姓名" type="text" maxlength="20" />
                </view>
                <view class="form-item">
                    <text>联系电话</text>
                    <input v-model.trim="addressForm.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
                </view>
                <view class="form-item" style="flex-direction: column;align-items: flex-start;border-bottom: 1px solid #EDEDED;">
                    <text>详细地址</text>
                    <textarea style="width: 100%;" v-model.trim="addressForm.address" placeholder="请输入详细收货地址（精确到门牌号）"
                        maxlength="100"></textarea>
                </view>
                <view class="form-btns">
					<button @click="showAddressForm = false">取消</button>
					<button @click="confirmAddress">确认</button>
                  <!--  <u-button plain @click="showAddressForm = false" :custom-style="{
                        width: '220rpx',
                        height: '80rpx',
                        borderRadius: '40rpx'
                    }">取消</u-button>
                    <u-button type="primary" @click="confirmAddress" :custom-style="{
                        width: '220rpx',
                        height: '80rpx',
                        borderRadius: '40rpx'
                    }">确认</u-button> -->
                </view>
            </view>
        </u-popup>

        <!-- 支付方式弹框 -->
        <u-popup v-model="showPay" mode="bottom" border-radius="14" :closeable="true">
            <view class="pay-title">选择支付方式</view>
            <view @click="goMoney" class="recharge-tip">
                <text>金豆不足？</text>
                <text class="go-recharge">去充值</text>
            </view>

            <view class="pay-method" v-for="(item, index) in payMethods" :key="index" @tap="selectWay(item.id)">
                <view class="method-info">
                    <image :src="item.image" class="method-icon"></image>
                    <text>{{ item.text }}</text>
                </view>
                <radio-group name="payWay">
                    <label class="radio-label">
                        <radio color="#FD7D89" :checked="payWay === item.id" />
                    </label>
                </radio-group>
            </view>

            <view class="confirm-pay" @tap="pay">确认支付</view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            goodsInfo: {
                id: '',
                poster: '',
                title: '',
                price: 0,
                stock: 0,
                createTime: '',
                detailImg: '',
                type: 1 // 1:虚拟商品 2:实体商品
            },
            showAddressForm: false,
            addressForm: {
                name: '',
                phone: '',
                address: ''
            },
            showPay: false,
            payWay: 3, // 3:金豆 2:支付宝
            payMethods: [
                {
                    image: '/static/images/pay/lingqian.png',
                    text: '金豆支付',
                    id: 3
                },
                {
                    image: '/static/images/pay/zhifubao.png',
                    text: '支付宝',
                    id: 2
                }
            ]
        }
    },

    onLoad(options) {
        if (options.productId) {
            this.getGoodsDetail(options.productId)
        }
    },

    methods: {
        // 获取商品详情
        getGoodsDetail(id) {
            this.$u.get(`/app/shop/getGoodInfo?id=${id}`).then(res => {
                if (res.code === 0) {
                    this.goodsInfo = res.data
                    this.type = res.data.classify
                }
            })
        },

        // 处理购买
        handleBuy() {
            // 重置表单数据
            this.addressForm = {
                name: '',
                phone: '',
                address: ''
            }
            // 分类 1 创作者工具  2 普通商品
            if (this.goodsInfo.classify === 1) {
                // 虚拟商品直接显示支付
                this.showPay = true
            } else {
                // 实体商品先填地址
                this.showAddressForm = true
            }
        },

        // 确认收货地址
        confirmAddress() {
            // 手机号验证正则
            const phoneReg = /^1[3-9]\d{9}$/;

            if (!this.addressForm.name.trim()) {
                this.$u.toast('请输入收货人姓名')
                return
            }
            if (!phoneReg.test(this.addressForm.phone)) {
                this.$u.toast('请输入正确的手机号码')
                return
            }
            if (!this.addressForm.address.trim()) {
                this.$u.toast('请输入收货地址')
                return
            }

            this.showAddressForm = false
            this.showPay = true
        },

        // 选择支付方式
        selectWay(id) {
            this.payWay = id
        },

        // 去充值
        goMoney() {
            uni.navigateTo({
                url: '/me/wallet/wallet'
            })
        },
        // 支付
        pay() {
            let orderData = {
                productId: this.goodsInfo.id,
                realName: this.addressForm.name,
                userPhone: this.addressForm.phone,
                userAddress: this.addressForm.address
            }
            this.$u.get('/app/order/insertShopOrders', orderData).then(res => {
                if (res.code === 0) {
                    if (this.payWay === 3) {
                        // 金豆支付
                        this.goldPay(res.data.ordersId)
                    } else {
                        // 支付宝支付
                        this.aliPay(res.data.ordersId)
                    }
                }
            })
        },

        // 金豆支付
        goldPay(orderId) {
            this.$u.post('/app/order/payOrders?orderId=' + orderId).then(res => {
                if (res.code === 0) {
                    this.showPay = false
                    uni.showToast({
                        title: '支付成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        this.$navTo('/me/shop/order/index')
                    }, 1500)
                } else {
                    this.$u.toast(res.msg)
                }
            })
        },

        // 支付宝支付
        aliPay(orderId) {
            // #ifdef H5
            this.$u.post('/app/aliPay/payOrderShop?orderId=' + orderId + '&classify=2&payType=ALIPAY_H5').then(res => {
                if (res.code === 0) {
                    const div = document.createElement('div')
                    div.innerHTML = res.data
                    document.body.appendChild(div)
                    document.forms[0].submit()
                }
            })
            // #endif

            // #ifdef APP-PLUS
            this.$u.post('/app/aliPay/payOrderShop?orderId=' + orderId + '&classify=1&payType=ALIPAY_APP').then(res => {
                if (res.code === 0) {
                    uni.requestPayment({
                        provider: 'alipay',
                        orderInfo: res.data,
                        success: () => {
                            this.showPay = false
                            uni.showToast({
                                title: '支付成功',
                                icon: 'success'
                            })
                            setTimeout(() => {
                                uni.navigateBack()
                            }, 1500)
                        }
                    })
                }
            })
            // #endif
        }
    }
}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F8FF;
	}
// 添加支付相关样式
.confirm-pay-btn {
    width: 690rpx;
    height: 80rpx;
    background: #8B8FF0;
    color: #FFFFFF;
    text-align: center;
    line-height: 80rpx;
    border-radius: 50rpx;
    margin: 30rpx;
}

.goods-detail {
    min-height: 100vh;
    // background: #f5f5f5;
    padding-bottom: 120rpx;
}

.goods-info {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .goods-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
		padding-bottom: 20rpx;
    }

    .goods-price {
       font-weight: 500;
       font-size: 30rpx;
       color: #FD7885;
	   padding-bottom: 20rpx;
		border-bottom: 1px solid #EDEDED;
    }

    .goods-sub-info {
        font-size: 24rpx;
        color: #999;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 24rpx;
		color: #B3B3B3;
        padding-top: 20rpx;
    }
}


.quanyi_content_box{
	background: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	.qy_title{
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		padding: 10rpx 0 20rpx 0;
	}
}
.goods-status {
   
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
	display: flex;
	flex-wrap: wrap;
    .status-item {
		display: flex;
		align-items: center;
		width: 330rpx;
		height: 104rpx;
		background: linear-gradient(180deg, #FEFAE8, #FDFBF7);
		border-radius: 10rpx;
		padding: 20rpx;
		&:nth-child(1){
			margin-bottom: 20rpx;
		}
		&:nth-child(2){
			margin-bottom: 20rpx;
		}
		image{
			width: 64rpx;
			height: 64rpx;
			margin-right: 16rpx;
		}
		.st_text_box{
			
		}
        // &:not(:last-child)::after {
        //     content: '';
        //     position: absolute;
        //     right: 0;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     height: 70%;
        //     width: 1px;
        //     background-color: #eee;
        // }

		.st_text_box{
			display: flex;
			flex-direction: column;
		}
        .status-label {
           font-weight: 500;
           font-size: 24rpx;
           color: #D4A76B;
        }

        .status-value {
            font-weight: bold;
            font-size: 30rpx;
            color: #705637;
			padding-top: 6rpx;
        }
    }
}

.goods-detail-content {
    background: #fff;
    padding: 30rpx;

    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }
}

.footer-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(18rpx + constant(safe-area-inset-bottom));
    bottom: calc(18rpx + env(safe-area-inset-bottom));
    padding: 0 30rpx;
	button{
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #FD7885, #FAA7AF);
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
}

.address-form {
    padding: 30rpx;

    .form-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 40rpx;
        color: #333;
    }

    .form-item {
        background: #fff;
        padding: 26rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #EDEDED;
        text {
           font-weight: bold;
           font-size: 28rpx;
           color: #333333;
		   flex-shrink: 0;
        }
		input{
			text-align: right;
		}
        input,
        textarea {
            box-sizing: border-box;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333
            &:focus {
                border-color: #8B8FF0;
                outline: none;
            }
        }

        input {
            height: 80rpx;
            padding: 0 20rpx;
        }

        textarea {
            // padding: 20rpx;
            height: 160rpx;
			padding-top: 20rpx;
        }
    }

    .form-btns {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
		button{
			line-height: 80rpx;
			&:nth-child(1){
				width: 330rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid #CCCCCC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				background-color: #fff;
				margin-right: 20rpx;
			}
			&:nth-child(2){
				width: 330rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FD7885, #FAA7AF);
				border-radius: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
      
    }
}

.pay-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx;
}

.recharge-tip {
    padding: 0 30rpx 20rpx;
    text-align: right;
    color: #666;

    .go-recharge {
        color: #8B8FF0;
        margin-left: 10rpx;
    }
}

.pay-method {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;

    .method-info {
        display: flex;
        align-items: center;

        .method-icon {
            width: 50rpx;
            height: 50rpx;
            margin-right: 20rpx;
        }
    }
}

.confirm-pay {
    margin: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: linear-gradient(90deg, #FD7885, #FAA7AF);
    color: #fff;
    border-radius: 40rpx;
}
</style>
